<template>
  <!-- 测量点弹窗 -->
  <a-modal v-bind="$attrs" v-on="$listeners" :visible.sync="dialogVisible" @cancel="handleCancel">
    <b slot="title">{{ headerTitle }}</b>
    <a-tabs v-model="activeKey" :animated="false" @change="handleTabChange">
      <a-tab-pane v-for="item in activeKeyList" :key="item.id" :tab="item.name"></a-tab-pane>
    </a-tabs>
    <a-row :gutter="10">
      <!-- 侧边栏 -->
      <a-col :span="6" style="border-right: 1px solid #d9d9d9">
        <!-- 分部分项树搜索 -->
        <tree-search
          ref="treeSubItem"
          :defaultHeight="'calc('+GET_REDRESS_PERCENTAGE *0.6+'vh - 40px)'"
          :init-expand-all="false"
          emptyDescription="暂无分部分项信息"
          isAll
          isDisabled
          @loader="search"
          :selectedKeys.sync="selectedKeys"
          :selectOptions.sync="selectOptions"
          :outsideTreeList="outsideTreeList"
          :outsideTreeSpinning="outsideTreeSpinning"
        />
      </a-col>
      <!-- 主内容 -->
      <a-col :span="18" :style="'max-height: '+GET_REDRESS_PERCENTAGE *0.6+'vh; overflow: auto'">
        <!-- 组织等级tabs -->
        <TabsOrgLevels :id.sync="checkItemLevelId" @switch="search" />
        <!-- 表格 -->
        <s-table
          ref="table"
          tableLayout="fixed"
          size="default"
          :rowKey="(row) => row.id"
          :columns="columns"
          :data="loadData"
          :alert="true"
          show-size-changer
          show-quick-jumper
          showPagination="auto"
        >
          <!-- 表格操作栏 -->
          <span slot="actions" slot-scope="text, record">
            <template>
              <a-button type="primary" @click="handleOk(record)">选择</a-button>
            </template>
          </span>
          <a-list
            slot="expandedRowRender"
            slot-scope="record"
            item-layout="horizontal"
            :data-source="record.checkItems"
          >
            <a-list-item slot="renderItem" slot-scope="item">
              <a-row style="width: 100%">
                <a-col :span="6">检查项名称：{{ item.checkItemName }}</a-col>
                <a-col :span="6">判定类型：{{ item.judgmentType }}</a-col>
                <a-col :span="6">标准值：{{ item.value }}</a-col>
                <a-col :span="6">单位：{{ item.unit }}</a-col>
              </a-row>
            </a-list-item>
          </a-list>
        </s-table>
      </a-col>
    </a-row>
    <!-- 页脚操作栏 -->
    <div slot="footer" class="btn_box">
      <a-button type="primary" @click="handleCancel">关闭</a-button>
    </div>
  </a-modal>
</template>

<script>
import { STable } from '@/components' // 表格
import TreeSearch from '@/components/businessComponents/TreeSearch' // 树
import { pointList } from '@/api/quality/reality' // 树
import TabsOrgLevels from '@/components/businessComponents/TabsOrgLevels' // tabs
import { subItem } from '@/api/quality/currency' // api
import {mapGetters } from 'vuex'
export default {
  name:'DialogChoose',
  components: {
    TreeSearch,
    STable,
    TabsOrgLevels,
  },
  props: {
    // 显隐控件
    visible: {
      type: Boolean,
      default() {
        return false
      },
    },
    // 详情
    record: {
      type: Object,
    },
    // 操作类型
    editModel: {
      type: [String, Number],
      default() {
        return 0
      },
    },
    // 表单
    form: {
      type: Object,
      default() {
        return null
      },
    },
    // 标题
    headerTitle: {
      type: String,
      default() {
        return ''
      },
    },
  },
  computed: {
    ...mapGetters(['GET_REDRESS_PERCENTAGE']),
    // 与父组件绑定visible
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (e) {
        this.$emit('update:visible', e)
      },
    },
    // 与父组件绑定visible
    pointRecord: {
      get: function () {
        return this.record
      },
      set: function (e) {
        this.$emit('update:record', e)
      },
    },
  },
  data() {
    return {
      forms: {},
      activeKey: '',
      activeKeyList: [],
      treeAllList: [],
      outsideTreeList: [],
      outsideTreeSpinning: false,
      selectedKeys: [],
      selectOptions: {},
      checkItemLevelId: '', // 检查项等级
      loadData: (parameter) => {
        let that = this
        if (that.selectedKeys.length > 0) {
          const requestParameters = Object.assign({}, parameter, {
            subItemId: that.selectedKeys[0],
            status: '1',
            mark: true,
            checkItemLevelId:this.checkItemLevelId,
            projectId: this.form.projectId,
          })
          return pointList.getList(requestParameters).then((res) => {
            if (res.code === 200) {
              return res
            }
          })
        }
      },
      columns: [
        {
          title: '编号',
          dataIndex: 'code',
          ellipsis: true,
          width: '130px',
        },
        {
          title: '点位名称',
          ellipsis: true,
          dataIndex: 'pointName',
          width: '130px',
        },
        {
          title: '点位等级',
          dataIndex: 'belong',
          ellipsis: true,
          width: '130px',
        },
        {
          title: '检查项数量',
          dataIndex: 'checkItemNumber',
          width: '130px',
        },
        {
          title: '点位描述',
          ellipsis: true,
          dataIndex: 'pointDescription',
        },
        {
          title: '操作',
          dataIndex: 'actions',
          width: '100px',
          scopedSlots: { customRender: 'actions' },
        },
      ],
    }
  },
  methods: {
    // 获取表格列表
    search() {
      this.$refs.table.refresh(true)
    },
    handleOk(record) {
      this.pointRecord = record
      this.$message.success('选择点位成功，请进行打点！')
      this.handleCancel()
    },
    handleCancel() {
      this.dialogVisible = false
    },
    handleTabChange(activeKey) {
      const index =  this.activeKeyList.findIndex(item => item.id === activeKey)
      this.handleSelect(index)
    },
    handleSelect(index) {
      this.outsideTreeList = this.treeAllList[index]?.children
      this.$nextTick(() => {
        if (this.outsideTreeList.length > 0) {
          this.selectedKeys = this.outsideTreeList[0].enabled
          ? [this.outsideTreeList[0].id]
          : this.outsideTreeList[0].enabled != undefined
          ? []
          : [this.outsideTreeList[0].id]
          this.$refs.treeSubItem.updateSelectedKeys(this.selectedKeys)
        }
        this.search()
      })
    },
    getSubItemList() {
      this.outsideTreeSpinning = true
      subItem.getList({isBase: true, projectId: this.form.projectId, isChildren:false, sources: 0}).then(res => {
        if (res.data && res.data.length) {
          this.treeAllList = res.data
          this.activeKeyList = res.data.map((item, index) => {
            const json = {
              id: item.id,
              name: item.name,
              index
            }
            return json
          })
          this.activeKey = this.activeKeyList[0].id
          this.handleSelect(0)
        }
        this.outsideTreeSpinning = false
      }).catch(() => {
        this.outsideTreeSpinning = false
      })
    }

  },
  watch: {
    visible(e) {
      if (e) {
        this.$nextTick(() => {
          this.getSubItemList()
        })
      }
    },
  },
}
</script>
